<template>
  <div class="home">
   <div class="money">
  <p>您的可用额度</p>
  <count-to :startVal="start" :endVal="200000" :duration="1000"></count-to>
  <span>元</span>
   </div>
  </div>

</template>

<script setup>
import { computed, ref } from "vue";
import { CountTo } from 'vue3-count-to';

const start = ref(0);
const end = ref(1000);
const number=computed(()=>{
  return  Math.floor(Math.random() * (100000-10000+1))+10000;
})
</script>

<style  scoped>
.home{
    width: 100%;
    height: 100%;
    background:linear-gradient(rgb(65, 65, 238),#fff);
    position: relative;
}
.money{
    width: fit-content;
    height: fit-content;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 2.5rem;
    background-color: white;
    border-radius: 10px;
    line-height: 4rem;
    text-align: center;
}
.money p:nth-child(1){
    font-size: 24px;
    font-weight: 700;
}
.money span{
    font-size: 22px;
    color: blue;
}

</style>